<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心-阿里迪里影院</title>
    <link href="images/favicon.ico" rel="shortcut icon" />

    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="css/order.css">
    <style>
        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 导航栏部分 -->
    <div class="head">
        <div class="head-inner">
            <div class="logo"><img src="images/logo.jpg">阿里迪里影院</div>

            <div class="nav">
                <ul class="navbar">
                    <li><a class="shouye" href="home_index.html">首页</a></li>
                    <li><a href="home_filmType.html">电影</a></li>
                    <li><a href="https://maoyan.com/cinemas">影院</a></li>
                    <li><a href="http://www.gewara.com/">演出</a></li>
                    <li><a href="https://maoyan.com/board">榜单</a></li>
                    <li><a href="https://maoyan.com/news">热点</a></li>
                    <li><a href="https://maoyan.com/edimall">商城</a></li>
                </ul>
            </div>

            <form>
                <input type="text" id="cond" required placeholder="找影片、 影剧" class="search">
                <input class="sub" type="button" title="点击可搜索你喜爱的电影哦。" id="commit">
            </form>

            <div class="user-info">
                <ul class="layui-nav layui-layout-right" style="background-color:#fff;">
                    <li class="layui-nav-item"><a href="javascript:;">
                            <img id="pic" class="layui-nav-img"></a>
                        <dl class="layui-nav-child">
                            <dd id="h1" class="subMenu">
                                <a href="home_myOrder.html">我的订单</a>
                            </dd>
                            <dd id="h2" class="subMenu">
                                <a href="home_information.html">个人中心</a>
                            </dd>
                            <dd id="h3" class="subMenu">
                                <a id="logout">退出登录</a>
                            </dd>
                        </dl>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <!-- 个人中心部分 -->
    <div class="grzx"></div>
    <div id="information" v-cloak>
        <div class="container">
            <div class="content">
                <div class="main">
                    <div class="info-content">
                        <div class="user-profile-nav">
                            <h1>个人中心</h1>
                            <a href="home_myOrder.html" class="orders ">我的订单</a>
                            <a href="home_information.html" class="profile active">基本信息</a>
                        </div>
                        <div class="profile-container">
                            <div class="profile-title">基本信息</div>
                            <div class="avatar-container">
                                <div class="avatar-content">
                                    <img class="J-setted-avatar" id="pic2">
                                    <div class="J-upload-avatar-w upload-avatar-image">
                                        <input type="button" class="J-upload-avatar upload-btn" value="更换头像">
                                        <input type="file" id="fileUpload" name="file">
                                    </div>
                                    <div class="tips">支持JPG，JPEG，PNG格式，且文件需小于1M</div>
                                </div>
                            </div>

                            <form action="J-userexinfo-form" class="userexinfo-form">
                                <div class="userexinfo-form-section">
                                    <p>用户名：</p>
                                    <span>
                                        <input type="text" id="userName" v-bind:value="user.userName">
                                    </span>
                                </div>

                                <div class="userexinfo-form-section">
                                    <p>性别：</p>
                                    <span>
                                        <input type="radio" name="genber" id="man" value="男"
                                            v-bind:checked="user.sex=='男'?true:false">
                                        <label for="man">男</label>
                                    </span>
                                    <span>
                                        <input type="radio" name="genber" id="woman" value="女"
                                            v-bind:checked="user.sex=='女'?true:false">
                                        <label for="woman">女</label>
                                    </span>
                                </div>

                                <div class="userexinfo-form-section">
                                    <p>注册时间：</p>
                                    <span>{{user.registerTime }}</span>
                                </div>

                                <div class="userexinfo-form-section">
                                    <p>手机号码：</p>
                                    <span>
                                        <input type="text" id="phone" v-bind:value="user.phone">
                                    </span>
                                </div>

                                <div class="userexinfo-bottom-section clearfix">
                                    <input type="button" class="layui-btn layui-btn-danger" value="保存" @click="save">
                                    <input type="button" class="layui-btn layui-btn-normal" value="修改密码"
                                        id="updatePass">
                                </div>
                            </form>

                            <!-- 修改密码弹出层 -->
                            <form class="layui-form" style="display: none;margin: 20px;" id="updatePassOpen">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <input type="password" id="oldPass" placeholder="请输入旧密码" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <input type="password" id="newPass" placeholder="请输入新密码" class="layui-input">
                                    </div>
                                </div>
                            </form>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!--底部版块部分-->
    <div class="footer">
        <p class="footer-font">
            关于阿里迪里：
            <a href="#">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">管理团队</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="#">投资者关系</a>&nbsp;&nbsp;&nbsp;&nbsp;
            友情链接：
            <a href="https://maoyan.com/films">猫眼电影</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="https://maoyan.com/cinemas">猫眼影院</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                href="https://maoyan.com/edimall">猫眼商城</a>
        </p>

        <p>
            商务合作邮箱：alidli@qq.com &nbsp;&nbsp;|&nbsp;&nbsp;客服电话：10104422
        </p>

        <p class="footer-font">
            Copyright &copy; 2020 - {{nowYear}} 版权所有| by<a href="http://www.gd-nf.com.cn/"> gd-nf</a>
        </p>

        <p>
            &copy;2020 阿里迪里影视 alidli.com
        </p>

        <div class="footer-end">
            <img src="images/bankuai1.png"><img src="images/bankuai2.png"><img src="images/bankuai3.png">
        </div>
    </div>




    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/jquery.cookie.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/home-information.js"></script>
    <script src="js/home-same.js"></script>
    <script>
        if (zx.user != "") {
            //弹出一个页面层（用户修改密码）  
            $('#updatePass').on('click', function () {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-lan',
                    title: '修改密码',
                    anim: 1,   // 动画
                    resize: false,  // 是否允许拉伸改变宽高
                    area: ['230px', '230px'], // 设置宽，高
                    shadeClose: false, //点击遮罩关闭
                    content: $("#updatePassOpen"),
                    btn: ['确认', '取消'],
                    btn1: function (index) {
                        let oldPass = $("#oldPass");
                        let newPass = $("#newPass");
                        if (oldPass.val() == "") {
                            oldPass.focus();
                            layer.msg("请输入旧密码", { offset: 't', icon: 5, anim: 6 });
                            return;
                        }
                        if (newPass.val() == "") {
                            newPass.focus();
                            layer.msg("请输入新密码", { offset: 't', icon: 5, anim: 6 });
                            return;
                        }

                        let formData = {
                            userId: zx.user.userId,
                            rightPass: zx.user.password,
                            oldPass: oldPass.val(),
                            newPass: newPass.val()
                        }

                        $.ajax({
                            url: 'http://localhost:8080/cinema/api/UserUpdatePassServlet.do',
                            type: 'put',
                            dataType: 'json',
                            data: JSON.stringify(formData),     // 把JavaScript对象，转换为JSON字符串
                            success: function (dto) {
                                if (dto.code == 200) {
                                    // 重新设置会话存储数据
                                    let user = {
                                        userId: zx.user.userId,
                                        userName: zx.user.userName,
                                        password: newPass.val(),
                                        phone: zx.user.phone,
                                        sex: zx.user.sex,
                                        image: zx.user.image,
                                        registerTime: zx.user.registerTime,
                                        status: zx.user.status
                                    }
                                    sessionStorage.setItem('user', JSON.stringify(user));

                                    oldPass.val("");
                                    newPass.val("");
                                    // 关闭弹出层
                                    layer.close(index);
                                    layer.msg(dto.value, { icon: 1 });

                                } else {
                                    oldPass.focus();
                                    layer.msg(dto.msg, { offset: 't', icon: 5, anim: 6 });
                                }
                            }
                        });
                    },
                    btn2: function () {
                        $("#oldPass").val('');
                        $("#newPass").val('');
                    }
                });
            });
        }
    </script>
</body>
</html>